<template>
  <div class="container">
    <!-- <nav-bar title="申请" /> -->
    <div class="belong-apply">
      <div class="title" v-if="action ==='ISP'">TITIKA [城市运营商]申请</div>
      <div class="title" v-else>TITIKA [城市主理人]申请</div>
      <div class="item">
        <div class="label">姓名</div>
        <input 
          type="text" 
          class="ipt" 
          placeholder="请输入姓名" 
          v-model="shopName"
        />
      </div>
      <div class="item">
        <div class="label">手机号</div>
        <input 
          type="text" 
          class="ipt" 
          placeholder="请输入手机号" 
          v-model="mobile"
        />
      </div>
      <div class="item">
        <div class="label">验证码</div>
        <input 
          type="text" 
          class="ipt" 
          placeholder="请输入验证码" 
          v-model="mobileCode"
        />
        <!-- <button class="verify-btn" @click="getCode">获取验证码</button> -->
        <send-code @btnclick="getCode" ref="sendcode" />
      </div>
      <!-- <div class="item">
        <div class="label">省份</div>
        <input type="text" class="ipt" placeholder="请输入姓名" />
      </div> -->
      <div class="item" @click="showArea">
        <div class="label">城市</div>
        <!-- <input type="text" class="ipt" placeholder="请输入姓名" :value="" /> -->
        <div class="ipt ipt-city">{{province + ' ' + city}}</div>
      </div>
      <van-popup v-model="areaShow" position="bottom">
        <van-area 
          :area-list="areaList" 
          :columns-num="2"
          @confirm="areaConfirm"
          @cancel="areaCancel"
        />
      </van-popup>
      <div class="item">
        <div class="label">从事行业</div>
        <input 
          type="text" 
          class="ipt" 
          placeholder="请输入从事行业" 
          v-model="occupation"
        />
      </div>
      <div class="item">
        <div class="label">是否有店面</div>
        <van-radio-group class="radio-group" v-model="hasShop" direction="horizontal">
          <van-radio name="1">是</van-radio>
          <van-radio name="2">否</van-radio>
        </van-radio-group>
      </div>
      <div class="item">
        <div class="label">是否自己经营</div>
        <van-radio-group class="radio-group" v-model="belongSelf" direction="horizontal">
          <van-radio name="1">是</van-radio>
          <van-radio name="2">否</van-radio>
        </van-radio-group>
      </div>
      <button class="apply-btn" @click="belongMan">提交申请</button>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import SendCode from 'components/common/SendCode'
import area from '../../assets/js/area'
import { phoneReg } from '../../utils'
import { Toast } from 'vant'
import { getApplyPhoneCode } from '../../network/user'
import { applyBelong } from '../../network/belong'

export default {
  components: {
    NavBar,
    SendCode
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      province: '浙江省',
      city: '杭州市',
      areaList: {},
      areaShow: false,
      shopName: '',
      mobile: '',
      mobileCode: '',
      occupation: '',
      hasShop: '',
      belongSelf: '',
      action: this.$route.query.action,
    }
  },
  methods: {
    showArea(){
      this.areaShow = true
    },
    areaCancel(){
      this.areaShow = false
    },
    areaConfirm(e){
      this.province = e[0].name
      this.city = e[1].name
      this.areaShow = false
    },
    getCode(){
      if(!phoneReg(this.mobile)){
        Toast('手机号格式错误')
        return false
      }
      let requestData = {
        userkey: this.userKey,
        mobile: this.mobile
      }
      getApplyPhoneCode(requestData, flag => {
        if(flag){
          // 验证码倒计时
          this.$refs.sendcode.count()

          Toast('短信验证码已发送')
        }
      })
    },
    belongMan(){
      let requestData = {
        isHasShop: this.hasShop,
        isSelfManager: this.belongSelf,
        userkey: this.userKey,
        shopName: this.shopName,
        mobile: this.mobile,
        mobileCode: this.mobileCode,
        shopAddress: this.province + this.city,
        occupation: this.occupation,
        isShowLogo: false,
        logoUrl: '',
      }
      // 校验提交字段是否为空
      if(
        requestData.isHasShop==='' || 
        requestData.isSelfManager==='' ||
        requestData.shopName==='' ||
        requestData.mobile==='' ||
        requestData.mobileCode==='' ||
        requestData.shopAddress==='' ||
        requestData.occupation===''
      ){
        Toast('请填写所有选项后再提交')
        return false
      }
      applyBelong(requestData, res => {
        Toast('申请已提交')
        setTimeout(() => {
          if(this.action === 'ISP'){
            this.$router.push('/shopApplying')
          } else {
            this.$router.push('/user')
          }
        }, 2000)
      })
    }
  },
  mounted() {
    // 如果是城市运营商，直接跳转到专属界面
    if(JSON.parse(localStorage.getItem('isISP')) === true && JSON.parse(localStorage.getItem('isBelongMan')) === true){
      this.$router.push('belong')
    }

    this.areaList = area
  },
}
</script>

<style scoped>
.container{
  background-color: #ffffff;
}
.belong-apply{
  position: relative;
  padding: 30px;
  font-size: 14px;
}
.belong-apply:before{
  display: block;
  content: '';
  position: absolute;
  left: -18px;
  top: 50px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #0598dd;
}
.belong-apply .title{
  font-size: 18px;
  line-height: 2;
  padding-bottom: 20px;
  text-align: center;
}
.belong-apply .item{
  position: relative;
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 3px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #e4e4e4;
}
.belong-apply .label{
  width: 90px;
  padding-left: 10px;
  flex-shrink: 0;
}
.belong-apply .item .ipt{
  flex-grow: 1;
  height: 100%;
  min-width: 50px;
}
.belong-apply .item .ipt-city{
  line-height: 43px;
}
.belong-apply .item .radio-group{
  flex-grow: 1;
  display: flex;
  height: 100%;
}
.van-radio{
  width: 40%;
  justify-content: center;
}
.belong-apply .item .verify-btn{
  height: 100%;
  width: 100px;
  color: #0598dd;
  background: none;
}
.apply-btn{
  color: #ffffff;
  text-align: center;
  display: block;
  width: 100%;
  line-height: 45px;
  border-radius: 3px;
  margin-top: 20px;
  background-color:#0598dd;
}
.belong-apply a.sendbtn{
  width: 98px;
  color: #0598dd;
  line-height: 35px;
  background: none;
}
.belong-apply a.sendbtn.gray{
  color: #ccc;
  background: none;
}
</style>